import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

class App extends Component {
  // 初始化状态
  state = {
    todos: [
      { id: 1, name: '吃饭', done: true },
      { id: 2, name: '睡觉', done: true },
      { id: 3, name: '打游戏', done: false }
    ]
  }

  // 添加一个Todo对象
  addTodo = (todoObj) => {
    const { todos } = this.state
    const newTodos = [todoObj, ...todos]

    this.setState({
      todos: newTodos
    })
  }

  // 更新一个Todo对象
  updateTodo = (id, done) => {
    const { todos } = this.state
    const newTodos = todos.map((todo) => {
      if (id === todo.id) return { ...todo, done }
      else return todo
    })
    this.setState({
      todos: newTodos
    })
  }

  // 删除一个Todo对象
  deleteTodo = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter((todo) => {
      return todo.id !== id
    })
    this.setState({
      todos: newTodos
    })
  }

  handleAllCheckDelete = () => {
    const { todos } = this.state
    const newTodos = todos.filter((todo) => {
      return !todo.done
    })
    this.setState({
      todos: newTodos
    })
  }

  checkAllTodo = (done) => {
    const { todos } = this.state
    const newTodos = todos.map((todo) => {
      return { ...todo, done }
    })
    this.setState({
      todos: newTodos
    })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header todo={this.addTodo} />
          <List
            todos={todos}
            updateTodo={this.updateTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer
            todos={todos}
            handleAllCheckDelete={this.handleAllCheckDelete}
            checkAllTodo={this.checkAllTodo}
          />
        </div>
      </div>
    )
  }
}

export default App
